<template>
  <div class="table-content">
    <msui-datagrid class="msui-datagrid" ref="msuiDatagrid" :options="datagridOptions">
      <template v-for="(_, slotName) in $scopedSlots" v-slot:[slotName]="scope">
        <slot :name="slotName" v-bind="scope"></slot>
      </template>
    </msui-datagrid>
    <msui-pagination
      v-show="model.showPage == false ? false : true"
      class="table-page"
      ref="msuiPagination"
      @change="pageChange"
      :attrs="pageAttrs"
    />
  </div>
</template>
<script>
export default {
  name: 'modelListCore',
  data() {
    return {
      pageAttrs: {
        currentPage: 1,
        pageSize: 15,
        total: 0,
        pageSizes: [15, 30, 50, 100]
      },
      datagridOptions: {}
    }
  },
  props: {
    model: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  mounted() {
    this.initDatagrid()
    if (this.model.load == false) {
    } else {
      this.load()
    }
  },
  watch: {
    'model.paramsKeyword': {
      handler: function () {
        this.pageAttrs.currentPage = 1
        this.load()
      },
      deep: true
    }
  },
  computed: {
    params() {
      return this.model.paramsKeyword || {}
    }
  },
  methods: {
    getHeight(dom) {
      return dom.$el.clientHeight
    },
    initDatagrid() {
      this.getList = (params) => {
        if (this.model.get) {
          return this.$get(`${this.model.get}`, params)
        } else {
          return this.$post(`${this.model.post}`, params)
        }
      }
      let bind = {
        height: this.model.globalButton
          ? this.getHeight(this.$refs.msuiDatagrid) - 42
          : this.getHeight(this.$refs.msuiDatagrid),
        loading: false
      }
      this.datagridOptions = {
        data: this.model.data,
        selection: this.model.selection || false,
        index:
          this.model.index == false
            ? false
            : {
                indexMethod: (index) => {
                  return (this.pageAttrs.currentPage - 1) * this.pageAttrs.pageSize + index + 1
                }
              },
        datagridModel: this.model.datagridModel,
        globalButton: this.model.globalButton || [],
        inlineButton: this.model.inlineButton || [],
        inlineButtonWidth: this.model.inlineButtonWidth || null,
        bind: Object.assign({}, bind, this.model.bind),
        vOn: this.model.vOn
      }
    },
    load(params = {}) {
      this.datagridOptions.bind.loading = true
      this.getList({
        pageNum: this.pageAttrs.currentPage,
        pageSize: this.pageAttrs.pageSize,
        ...params,
        query: {
          ...this.params,
          ...params
        }
      })
        .then((data) => {
          this.$emit('changeData', data, this.datagridOptions, this.pageAttrs)
        })
        .finally(() => {
          this.datagridOptions.bind.loading = false
        })
    },
    pageChange(currentPage = 1, pageSize = 15) {
      let pageNum = currentPage
      this.load({ pageSize, pageNum })
    }
  }
}
</script>
<style scoped>
.table-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: auto;
  justify-content: center;
  height: 100%;
  background: white;
  padding: 15px 15px 0 15px;
}
.table-content .msui-datagrid {
  flex: 1;
  overflow: auto;
}
.table-content .table-page {
  flex: 0 0 30px;
  box-sizing: border-box;
}
</style>
<style lang="less">
.table-content {
  .el-pagination {
    margin-top: 10px !important;
  }
}
</style>
